<template>
  <wxc-tab-page ref="wxc-tab-page"
    id="tabPage"
    :tab-titles="tabTitles"
    :tab-styles="tabStyles"
    title-type="text"
    :need-slider="needSlider"
    :is-tab-view="isTabView"
    :tab-page-height="tabPageHeight"
    @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
    <div class="item-container" style="height:100%">
      <Total></Total>
    </div>
    <div class="item-container" style="height:100%">
      <Mark></Mark>
    </div>
  </wxc-tab-page>
</template>

<style>
  #tabPage{
    height:100%!important;
    border-bottom:1px solid #ddd;
  }
  #tabPage .tab-title-list{
    justify-content:center;
    align-items:center;
  }
</style>
<script>
  const dom = weex.requireModule('dom');
  import { WxcTabPage, WxcPanItem, Utils } from 'weex-ui';
  import Total from './total.vue'
  import Mark from './mark.vue'
  
  // https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js
  import Config from './config'
  
  export default {
    components: { WxcTabPage, WxcPanItem, Total, Mark },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabList: [],
      needSlider: true,
      demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      supportSlide: true,
      isTabView: true,
      tabPageHeight: 1334,
    }),
    created () {
      this.tabPageHeight = Utils.env.getPageHeight() - 100;
      this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
      Vue.set(this.tabList, 0, this.demoList);
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const self = this;
        const index = e.page;
        /* 未加载tab模拟数据请求 */
        if (!Utils.isNonEmptyArray(self.tabList[index])) {
          setTimeout(() => {
            Vue.set(self.tabList, index, self.demoList);
          }, 100);
        }
      },
      wxcPanItemPan (e) {
        if (Utils.env.supportsEBForAndroid()) {
          this.$refs['wxc-tab-page'].bindExp(e.element);
        }
      }
    }
  };
</script>